<template>
  <div id="Gallary" @click="handleGallaryClick">
    <div class="wrapper">
	  <swiper :options="swiperOption" class="swiper-content">
  	    <!-- slides -->
  	    <swiper-slide v-for="item,index of imgs" :key="item.index">
			       <img :src="item" class="swiper-img"/>
  	    </swiper-slide>
  	    <!-- Optional controls -->
  	    <div class="swiper-pagination" slot="pagination"></div>
	  </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Gallary',
  props:{
  	imgs:{
  		type:Array,
  		default(){
  			return []
  		}
  	}
  },
  data(){
		return{
			swiperOption:{
				pagination:'.swiper-pagination',
				paginationType:'fraction',
				loop:true,
				observeParents:true,	//修复swiper轮播问题
				observer:true
			}
	}
  },
  methods:{
  	handleGallaryClick(){
  		this.$emit('close')
  	}
  }
}
</script>

<style scoped>
#Gallary >>> .swiper-content{
	overflow: inherit;
}
#Gallary{
	display: flex;
	flex-flow: column  nowrap;
	justify-content: center;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 999;
	background-color: #000;
}
.wrapper{
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}
.swiper-img{
	width: 100%;
}
.swiper-pagination{
	color: #fff;
	bottom: -1rem;
}
</style>